<template>
	<!-- 这是第一个四格布局 -->
	<view class="bottommtow">
		<view class="ZKBO">
			<view class="bottommtow-one">
				<view class="bottommtoww">
					<image src="../../static/1.png" mode=""></image>
					<h3>角色1</h3>
					<text>自我介绍</text>
				</view>
				<view class="bottommtow-two">
					<view class="bottommtoww">
						<image src="../../static/2.jpg" mode=""></image>
						<h3>角色1</h3>
						<text>自我介绍</text>
					</view>
				</view>
			</view>
			<!-- 分割线竖排和横排的弹性布局融合使用 -->
			<view class="bottommtow-one">
				<view class="bottommtoww">
					<image src="../../static/1.png" mode=""></image>
					<h3>角色1</h3>
					<text>自我介绍</text>
				</view>
				<view class="bottommtow-two">
					<view class="bottommtoww">
						<image src="../../static/2.jpg" mode=""></image>
						<h3>角色1</h3>
						<text>自我介绍</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.bottommtow {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 800rpx;
		/* 给这个弹性布局加了高才行撑得下盒子*/
	}

	.ZKBO {
		/* 这个弹性布局控制横排 */
		display: flex;
		justify-content: center;
	}

	.bottommtow-one {
		width: 360rpx;
		height: 290rpx;
		border-radius: 40rpx;
		background-color: deepskyblue;
		margin-left: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.bottommtoww {
		/* 这个弹性布局控制竖排照片 */
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.bottommtow-two {
		width: 360rpx;
		height: 290rpx;
		border-radius: 40rpx;
		background-color: deepskyblue;
		margin-right: 10rpx;
	}


	.bottommtow-one image {
		width: 360rpx;
		height: 290rpx;
	}

	.bottommtow-two image {
		width: 360rpx;
		height: 290rpx;
	}

	.bottommtoww {
		/* 这个弹性布局控制竖排照片 */
		display: flex;
		justify-content: center;
		flex-direction: column;
	}
</style>
